<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			 body {
			        position: relative;
			    }
			    .btn {
			        width: 100px;
			        height: 40px;
			        line-height: 40px;
			        text-align: center;
			        margin:20px auto 0;
			        border: 1px solid #333;
			        border-radius: 10px;
			    }
			    .bg {
			        width: 100%;
			        height: 100%;
			        position: fixed;
			        top: 0;
			        left: 0;
			        background-color: rgba(0, 0, 0, .6);
			        display: none;
			    }
			    .popup {
			        width: 260px;
			        height: 320px;
			        background: red;
			        position: absolute;
			        top: 50%;
			        left: 50%;
			        transform: translate(-50%, -50%);
			        border-radius: 15px;
			     }
			    .popup .close {
			        width: 30px;
			        height: 30px;
			        line-height: 30px;
			        text-align: center;
			        position: absolute;
			        top: -40px;
			        right: 0px;
			        border: 1px solid #999;
			        border-radius: 50%;
			        color: #999;
			    }
		</style>
	</head>
	<body>
	    <div class="btn" id="btn">展示</div>
	    <div class="bg" id="bg">
	        <div class="popup" id="popup">
	            <div class="close" id="close">X</div>
	        </div>
	    </div>
			<script>
				 var btn = document.getElementById('btn');
				    var bg = document.getElementById('bg');
				    var popup = document.getElementById('popup');
				    var closeBtn = document.getElementById('close');
				    // 点击展示按钮显示弹窗
				    btn.addEventListener('click', ()=> {
				        bg.style.display = 'block';
				    });
				    // 点击阴影遮罩层关闭弹窗
				    bg.addEventListener('click', (e)=> {
				        bg.style.display = 'none'
				    });
				    // 阻止冒泡事件，点击弹窗不会执行父元素的点击事件
				    popup.addEventListener('click', (e)=> {
				        e.stopPropagation();
				    });
				    // 点击关闭符号关闭弹窗
				    closeBtn.addEventListener('click', (e)=> {
				        e.stopPropagation();
				        bg.style.display = 'none'
				    })
			</script>
	</body>
</html>